<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="https://gudian-gddl.oss-cn-beijing.aliyuncs.com/layui/jquery.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=tQAk8cBCGKz24ekGp5Tk9Q8QUVlMA4VB"></script>
    <title>数据大屏</title>
    <style type="text/css">
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #container{height:100%}
        *{
            color: #0087FF;
            font-size:12px;
            font-family: "华文细黑";
        }
    </style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
    $(function(){
        var map = new BMap.Map("container");
        var cityName = '济南市';
        map.centerAndZoom(cityName, 12);
        map.enableScrollWheelZoom(true);
        var bdary = new BMap.Boundary();
        bdary.get(cityName, function (rs) {       //获取行政区域
            map.clearOverlays();        //清除地图覆盖物
            //for循环都删除掉了，只剩下这个
            //网上查了下，东西经南北纬的范围
            var EN_JW = "180, 90;";         //东北角
            var NW_JW = "-180,  90;";       //西北角
            var WS_JW = "-180, -90;";       //西南角
            var SE_JW = "180, -90;";        //东南角
            //4.添加环形遮罩层
            var ply1 = new BMap.Polygon(rs.boundaries[0] + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW, { strokeColor: "none", fillColor: "rgb(246,246,246)", fillOpacity:1, strokeOpacity: 0.5 }); //建立多边形覆盖物

            map.addOverlay(ply1);
            //5. 给目标行政区划添加边框，其实就是给目标行政区划添加一个没有填充物的遮罩层
            var ply = new BMap.Polygon(rs.boundaries[0], { strokeWeight: 2, strokeColor: "#00f",fillColor: "" });
            map.addOverlay(ply);
            //map.setViewport(ply.getPath());    //调整视野
        });
    });

</script>
</body>
</html>
